Skip to content

Fix: restore full-width prose images on blog, changelog, stories & whitepaper - #5631

Merged
ZJvandeWeg merged 1 commit into
mainfrom
fix-prose-images-width
Aug 18, 2026
Merged

Fix: restore full-width prose images on blog, changelog, stories & whitepaper#5631
ZJvandeWeg merged 1 commit into
mainfrom
fix-prose-images-width

Conversation

@Yndira-E

Copy link
Copy Markdown
Contributor

Description

  • .prose img in src/css/style.css only had max-width: 100%, so images render at their native pixel size instead of filling the prose column.
  • Before the changelog's move to Nuxt, 11ty's eleventy-img pipeline resized every markdown image to the prose column's width (650px), which is why images always looked full-width. The new nuxt/components/content/ProseImg.vue just passes the image through with no resizing, so screenshots narrower than the column now render smaller than expected.
  • Added .prose:not(.prose-natural-size-images) img { width: 100%; height: auto; } to restore the fill-the-column look for blog, changelog, customer-stories, and whitepaper pages.
  • Added the new prose-natural-size-images class to handbook, docs, and the /node-red/** layout (layouts/documentation.njk), since those keep inline screenshots at their natural size.

Related Issue(s)

Checklist

  • I have read the contribution guidelines
  • I have considered the performance impact of these changes
  • Suitable unit/system level tests have been added and they pass
  • Documentation has been updated
  • For blog PRs, an Art Request has been created (instructions)

@netlify

netlify Bot commented Aug 18, 2026

Copy link
Copy Markdown

Deploy Preview for flowforge-website ready!

Name Link
🔨 Latest commit de3d365
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/6a8458cb204cc900083798ba
😎 Deploy Preview https://deploy-preview-5631--flowforge-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 59
Accessibility: 96
Best Practices: 100
SEO: 85
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

Comment thread src/_includes/layouts/documentation.njk
@ZJvandeWeg
ZJvandeWeg merged commit a156fed into main Aug 18, 2026
7 checks passed
@ZJvandeWeg
ZJvandeWeg deleted the fix-prose-images-width branch August 18, 2026 14:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants